<template>
  <div
    :class="className"
    :style="style"
    @contextmenu.prevent="() => {}"
    @drop="(e) => dragHandle(e, side)"
    @dragover="dragoverHandle"
    @dragenter="dragoverHandle"
    @mousedown="packageClick"
    :id="elId"
  >
    <slot></slot>
    <editRange>
      <div>
        <template v-for="element of component" :key="element.id">
          <shapeBox
            :element="element"
            @contextmenu="handleContextmenu"
            :type="shapeType"
          ></shapeBox>
          <template
            v-if="
              element.type == 'Desiccant' && element.desiccantPlaceMethod == 1
            "
          >
            <div :style="virStyle(element)"></div>
          </template>
        </template>
      </div>
    </editRange>
    <Comtextmenu v-model:menuShow="menuShow" :position="position" />
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import editRange from "./editRange.vue";
import shapeBox from "./shapeBox.vue";
import Comtextmenu from "./comtextmenu.vue";
import editStore from "@/store/editStore";

let props = defineProps({
  elId: {
    type: String,
    default: "",
  },
  side: {
    type: String,
    default: "",
  },
  className: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => ({}),
  },
  component: {
    type: Array,
    default: () => [],
  },
  shapeType: {
    type: String,
    default: "",
  },
  dragHandle: {
    type: Function,
    default: () => ({}),
  },
  dragoverHandle: {
    type: Function,
    default: () => ({}),
  },
  packageClick: {
    type: Function,
    default: () => ({}),
  },
});

let emits = defineEmits(["drop", "dragover", "mousedown"]);

let menuShow = ref(false);
let position = reactive({
  top: 0,
  left: 0,
});
let store = editStore();

function handleContextmenu(e) {
  e.preventDefault();
  e.stopPropagation();
  menuShow.value = true;
  position.left = e.pageX + 10 + "px";
  position.top = e.pageY + "px";
}

function dragHandle(e, type) {
  emits("drop", e, type);
}

function dragoverHandle(e) {
  emits("dragover", e);
}
function packageClick() {
  emits("mousedown");
}

function virStyle(element) {
  if (props.shapeType != "reel") {
    return { display: "none" };
  }
  let reelBlock = store.getReelBlockSize;
  let correctX = reelBlock.width / 2;
  let correctY = reelBlock.height / 2;
  return {
    position: "absolute",
    width: element.length + "px",
    height: element.width + "px",
    left: element.x1 + correctX + "px",
    top: element.y1 + correctY + "px",
    zIndex: 10,
    transform: `rotate(${element.angle}deg)`,
    background: `url(${element.picName})`,
    backgroundSize: "cover",
    opacity: 0.7,
    pointerEvents: "none",
    border: "1px dashed #f00",
  };
}
</script>
<style scoped lang="scss"></style>
